<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 载入文章头部页面，位置在/client文件夹下的header模板页面，模板名称th:fragment为header -->
<div th:replace="client/header::header(${userinfo.user.username},null)"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body>
<div class="layui-container" style="padding-top: 100px">
    <div class="card mb-3 shadow-lg p-3 mb-5 bg-white rounded">
        <div class="row no-gutters">
            <div class="col-md-3">
                <img th:src="@{${userinfo.user.avatar}}" height="auto" onerror="this.src='/assets/img/avatars.jpg'" class="card-img" alt="...">
            </div>
            <div class="col-md-9">
                <div class="card-body">
                    <br>
                    <strong><h1 class="card-title" th:text="${userinfo.user.username}"></h1></strong>
                    <br>
                    <h3 class="card-text" th:text="${userinfo.user.signature}"></h3>
                    <br>
                    <p class="card-text">联系我：<small class="text-muted" th:text="${userinfo.user.email}"></small></p>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md9">
            <h3>该博主最近发布</h3>
            <div th:each="article : ${userinfo.articleList}">
                <!--                遍历文章-->
                <br>
                <div class="card rounded-lg rounded-pill layui-anim layui-anim-down">
                    <div class="card-body" style="margin:10px 10px">
                        <!--                        标题-->
                        <a th:href="@{'/article/'+${article.id}}"><strong><h3 class="card-title" th:text="${article.title}">title</h3></strong></a>
                        <!--                        截取正文-->
                        <p class="card-text" th:utext="${commons.intro(article,160)}" ></p>
                        <!--                        信息-->
                        <p class="card-text">
                            <a th:href="@{'/user/'+${article.username}}" th:text="${article.username}" class="layui-text"></a>
                            <small class="text-muted" th:text="'  发布于  '+ ${commons.dateFormat(article.created)}"></small>
                            &nbsp&nbsp;<small class="text-muted" th:text="${article.commentsNum}+'评论' "></small>
                            &nbsp;<small class="text-muted" th:text="${article.hits}+'浏览'"></small>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div id="calendar"></div>
        </div>
    </div>
</div>

</body>
<!-- 载入文章尾部页面，位置在/client文件夹下的footer模板页面，模板名称th:fragment为footer -->
<div th:replace="client/footer::footer"/>
</html>
